<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
</head>

<body>
<h2>示例：组件component</h2>
<div>
    组件可以复用，并且维护自己的变量互不影响。
    <p>注意：一个组件的 data 选项必须是一个函数，否则组件之间的变量会互相影响。</p>
    <p> 全局注册（Vue.component）的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。 </p>
    <p>Vue.component必须在new Vue之前</p>
</div>
<div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>

    <h2>通过 Prop 向子组件传递数据</h2>
    <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:post="post"
    ></blog-post>

    <!--不要使用这种方式，不便扩展，使用上面的对象方式
    <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:title="post.title"
            v-bind:content="post.content"
            v-bind:publishedAt="post.publishedAt"
            v-bind:comments="post.comments"
    ></blog-post>-->

</div>

<script>
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    Vue.component('blog-post', {
        props: ['post'],
        template: `
          <div class="blog-post">
          <h5>{{ post.title }}</h5>
          <div v-html="post.content"></div>
          </div>
        `
    })

    new Vue({
        el: '#components-demo',
        data: {
            posts: [
                {id: 1, title: 'My journey with Vue'},
                {id: 2, title: 'Blogging with Vue'},
                {id: 3, title: 'Why Vue is so fun'}
            ]
        }
    })

</script>
</body>
</html>
